<template>
  <div class="form-group">
    <label for="exampleInputEmail1">添加代办事项</label>
    <input
      type="text"
      v-model="inputValue"
      class="form-control"
      id="exampleInputEmail1"
      aria-describedby="emailHelp"
      @keydown.enter="add(inputValue)"
    />
    <small id="emailHelp" class="form-text text-muted">回车即可加入</small>
  </div>
  <ul class="list-group">
    <li class="list-group-item" v-for="(item,index) in todos" :key="'todo'+ index">
      <div class=" form-check">
        <input type="checkbox" class="form-check-input" @click.prevent="check(index)" id="exampleCheck1" />
        <label class="form-check-label" for="exampleCheck1">{{item}}</label>
      </div>
      <div class="float-right">
         <button type="button" class="btn btn-danger" @click="del(index)">删除</button>
      </div>
    </li>
  </ul>
</template>

<script lang="ts">
import { computed, defineComponent, reactive, ref } from "vue";
import store from '@/store'
export default defineComponent({
  setup() {
    const inputValue = ref('')
    const add = (value: string) => {
      if(value.trim() === '') return
      store.commit('add',value)
      inputValue.value = ''
    }
    const del = (index: number) => {
         store.commit('del', index)
    }
    const check = (index: number) => {
         store.commit('check', index)
    }
    return reactive({
       inputValue,
       add,
       del,
       check,
       todos:computed(() => store.state.todos)
    })
  }
});
</script>

<style lang="scss" scoped></style>
